<template>
  <nut-tabs
    v-model="active"
    :color="color"
    :background="background"
    :direction="direction"
    :type="type"
    :swipeable="swipeable"
    :titleScroll="titleScroll"
    :ellipsis="ellipsis"
    :animatedTime="animatedTime"
    :titleGutter="titleGutter"
    :size="size"
    :autoHeight="autoHeight"
    :sticky="sticky"
    :top="top"
    :align="align"
    class="su-tabs"
    :class="{ 'su-tabs--blank': blank }"
  >
    <template v-if="$slots.titles" #titles>
      <slot name="default" :active="active" :column="column"></slot>
    </template>
    <nut-tab-pane
      :title="item.label"
      :pane-key="item.value"
      :disabled="item.disabled"
      v-for="(item, index) in column"
      :key="index"
    >
      <template v-if="$slots.deault" #deault>
        <slot name="default" :item="item"></slot>
      </template>
    </nut-tab-pane>
  </nut-tabs>
</template>

<script setup>
import { useVModel } from '@vueuse/core';
defineOptions({
  name: 'SuTabs'
});
const props = defineProps({
  modelValue: {
    type: [Number, String],
    default: undefined
  },
  column: {
    type: Array,
    default: () => []
  },
  blank: {
    type: Boolean,
    default: false
  },
  color: {
    type: String,
    default: undefined
  },
  background: {
    type: String,
    default: undefined
  },
  direction: {
    type: String,
    default: 'horizontal',
    validator: (value) => ['horizontal', 'vertical'].includes(value)
  },
  type: {
    type: String,
    default: 'line',
    validator: (value) => ['line', 'smile'].includes(value)
  },
  swipeable: {
    type: Boolean,
    default: false
  },
  titleScroll: {
    type: Boolean,
    default: false
  },
  ellipsis: {
    type: Boolean,
    default: true
  },
  animatedTime: {
    type: [Number, String],
    default: 300
  },
  titleGutter: {
    type: [Number, String],
    default: 0
  },
  size: {
    type: String,
    default: 'normal',
    validator: (value) => ['large', 'normal', 'small'].includes(value)
  },
  autoHeight: {
    type: Boolean,
    default: false
  },
  sticky: {
    type: Boolean,
    default: false
  },
  top: {
    type: Number,
    default: 0
  },
  align: {
    type: String,
    default: 'center',
    validator: (value) => ['left', 'center'].includes(value)
  }
});
const emit = defineEmits(['update:modelValue']);
const active = useVModel(props, 'modelValue', emit);
console.log(active, props.column, 'column');
</script>

<style lang="scss">
.su-tabs {
  &--blank {
    .nut-tabs__content {
      display: none;
    }
  }
}
</style>
